<template>
  <div class="menu-container">

    <el-card class="menu-tree" shadow="never">
      <el-page-header content="菜单概况">
      </el-page-header>
      <MenuTree ref="menuTree"/>
    </el-card>
    <div class="table-container">
      <el-card class="menu-input" shadow="never">
        <div class="select-input">
          菜单标题:
          <el-input label="菜单标题"  v-model="title" clearable placeholder="请输入菜单标题" class="title"></el-input>
          菜单父级标题:
          <el-input label="菜单父级标题" v-model="pTitle" clearable placeholder="请输入菜单父级标题" class="title"></el-input>
          <el-button type="primary" class="role-select-button" icon="el-icon-search" @click="handleQuery">查询</el-button>
        </div>
      </el-card>
      <!--      菜单表格-->
      <el-card class="menu-table" shadow="never">
        <!--      添加和批量删除的盒子-->
        <div class="menu-button-box">
          <el-button type="primary" size="mini" @click="handleAdd()">+添加</el-button>
          <el-button type="danger" size="mini" @click="handleDeleteMenu('批量',null)">批量删除</el-button>
        </div>
        <el-table :data="tableData" v-loading="loading" stripe style="width: 100%" fit border :header-cell-style="tableHeader"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" fixed></el-table-column>
          <el-table-column prop="title" label="菜单标题" width="150px"></el-table-column>
          <el-table-column prop="ptitle" label="父级标题" width="180px" align="center">
            <template v-slot="scope">
              <el-tag :type="scope.row.ptitle?'success':'warning'">{{scope.row.ptitle?scope.row.ptitle:"父级为空"}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="path" label="菜单路径" width="200px"></el-table-column>
          <el-table-column prop="icon" label="菜单图标" width="250px">
            <template v-slot="scope">
              <e-icon :icon-name="scope.row.icon"/>
              {{ scope.row.icon }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="菜单名"></el-table-column>
          <el-table-column label="操作" align="center">
            <template v-slot="scope">
              <el-button type="text" size="mini" @click="handleEditMenu(scope.row.id)">编辑</el-button>
              <el-button type="text" size="mini" style="color: red" @click="handleDeleteMenu('one',scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--    分页组件-->
        <el-pagination :page-sizes="[5, 8, 10,20,50]" :page-size="this.pageSize" :current-page="this.page"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="this.counts"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange">
        </el-pagination>

      </el-card>
    </div>
    <!--        添加菜单-->
    <AddMenu></AddMenu>
    <EditMenu></EditMenu>
  </div>
</template>

<script>
import MenuTree from '@/components/menu/MenuTree.vue'
import AddMenu from '@/components/menu/AddMenu.vue'
import { DeleteMenusApi, GetMenuPageApi } from '@/request/menu/menu-api'
import store from '@/store'
import EditMenu from '@/components/menu/EditMenu.vue'
export default {
  components: {
    MenuTree,
    AddMenu,EditMenu
  },created () {
      this.init()
    },
  data () {
    return {
      title:'',
      pTitle:'',
      pageSize: 8,
      page: 0,
      counts: 0,
      loading:true,
      tableData: [],
      checkList:[],
      tableHeader () {
        return {
          'text-align': 'center'
        }
      }
    }
  },methods:{
    //初始化页面
    refreshPage(){
      this.init()
      this.$refs['menuTree'].getSystemMenu()
    },
    async init () {
      //初始化分页查询的参数
      this.loading = true
      const params = {
        page: this.page,
        pageSize: this.pageSize,
        title: this.title ? this.title : undefined,
        pTitle: this.pTitle ? this.pTitle : undefined
      }
      let res = await GetMenuPageApi(params)   //异步发送axios请求，分页查询menu
      if (res&&res.code===200){
        this.tableData = res.data.records || []
        this.counts = res.data.total
        this.loading = false
      }
    },
    //删除处理
    handleDeleteMenu (type, id) {
      if (type === '批量' && id === null) {
        if (this.checkList.length === 0) {
          return this.$notify.warning({
            title: '警告',
            message: '请选择删除内容！'
          })
        }
      }
      //重新提示是否删除
      this.$confirm('确认删除角色，是否继续？', '确认删除', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'warning'
      }).then(async () => {
        //确认是单删还是批量删除
        let ids = (type === '批量') ? this.checkList.join(',') : id
        let res = await DeleteMenusApi(ids)
        if (res.code === 200) {
          //删除成功后的逻辑
          this.refreshPage()
          this.$message.success('删除成功！')
        } else {
          this.$message.error(res.msg)
        }
      }).catch((e) => {
        if (e === 'cancel') {
          this.$message.info('取消删除')
        } else {
        }
      })

    },
    handleAdd(){
      store.commit('MenuEdit/changeAddMenuSync',true)
    },
    handleEditMenu(id){
      store.commit('MenuEdit/changeEditMenuSync',true)
      store.commit('MenuEdit/changeEditMenuId',id)
    },
    handleQuery(){
      this.init()
    },
    //处理pageSize变化
    handleSizeChange (val) {
      this.pageSize = val
      this.init()
    },
    //处理page变化
    handleCurrentChange (val) {
      this.page = val
      this.init()
    },    //处理多选
    handleSelectionChange (val) {
      let checkArr = []
      val.forEach((n) => {
        checkArr.push(n.id)
      })
      this.checkList = checkArr
    }
  }
}
</script>
<style lang="less">
.menu-container {
  display: flex;
  justify-content: left;
  flex-direction: row;

  .menu-tree {
    min-height: 800px;
  }

  .menu-tree {
    min-width: 350px;
    margin-right: 20px;
    .MenuTree {
      margin: 20px 20px;
    }

    .el-page-header {
      margin-bottom: 20px;

      .el-page-header__left {
        display: none;
      }
    }
  }

  .table-container {
    flex-grow: 1;

    .menu-input {
      margin-bottom: 10px;
      .select-input {
        font-size: 14px;

        .title {
          width: 200px;
          margin-right: 20px;
        }
      }
    }

    .menu-table {
      min-height: 706px;
      .menu-button-box {
        float: right;
        margin: 10px 0 10px 10px;
      }

      .el-pagination {
        text-align: center;
        margin: 15px;
      }
    }
  }
}
</style>
